@anchorColor: #a1273c;
@fontColor: #292929;
@navActiveColor: #5acaf8;
@fontName: 'Microsoft YaHei',SansSerif;
@mainContentWidth: 76.25em;

#main-content {
  max-width: 76.25em; // 1200 % 16
  margin: auto;
  .big-pic{
    width: 100%;
    height: 200px;
    background-color: #CCCCCC;
  }
  .big-pic img{
    width: 100%;
  }

  .banner {
    min-width: 100%;

    //这个圆弧阴影要改成函数
    position: relative;
    overflow: hidden;

    &:before {
      z-index: 9999;
      content: "";
      width: 100%;
      border-radius: 50% 50%;
      height: 20px;
      box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.2);
      position: absolute;
      top: -20px;
    }

    img {
      max-width: 100%;
    }
  }

  .article {

    .header {
      max-width: 100%;
      overflow: hidden;
    }

    .section {
      margin-bottom:2em;

      .items {
        max-width: 100%;

        @media screen and (max-width: 900px) {
          li {
            flex-flow: row wrap;

            .aside,.digest {
              flex: 1 0 100%;

            }
          }
        }

        li {
          min-width: 100%;
          border-bottom: 2px dashed gainsboro;
          display: flex;
          justify-content: center;

          &:not(:first-of-type) {
            margin-top: 1em;
          }


          .aside {
            flex: 40%;
            text-align: center;
            overflow: hidden;
            height: 194px;
          }

          img {
            margin-left: 1em;
            max-width: 100%;
          }

          .digest {
            flex: 60%;
            min-height: 12.125em; // 194 % 16
            padding: 0.5em 1.5em; // 45 % 16 !
            position: relative;

            h1,p,.article-footer {
              font-family: @fontName;
              float: left;
            }

            h1 {
              font-size: 1.1em;
              font-weight: 600;
              margin-top: 0.1em;
              margin-bottom: 0.9em;

              a {
                color: @anchorColor;
                width: 100%;
                text-decoration: none;
              }

            }

            p {
              font-size: 1em;
              font-weight: 300;
              padding-right: 1em;
              color: grey;
              height: 8em;

            }

            .article-footer {
              width: 100%;
              bottom: 1em;

              .date {
                color:gainsboro;
              }

              .detail {
                float: right;

                a {
                  text-decoration: none;
                  color: darkred;
                  font-family: cursive;
                }
              }

            }
          }

        }
      }
    }

    .pagenav-footer {

      ul {
        float: right;
      }

      li {
        float:left;
        border: 2px solid gainsboro;
        font-family: @fontName;
        color:@fontColor;
        font-weight: 800;
        cursor: pointer;
        padding: 0.2em;
        margin: 0.2em;

        &.more {
          border: 0;
        }

        &.active {
          background-color: @navActiveColor;
          border: 2px solid @navActiveColor;;
          color: white;
        }
      }


    }


    //  正文
    .article-main {
      min-width: 100%;
      border-bottom: 2px dashed gainsboro;

      .header {

        border-top: 2px dashed gainsboro;
        border-bottom: 2px dashed gainsboro;
        padding: 1.2em 0 1.1em;

        .title {

          text-align: center;
          h1 {

            color: darkred;
            font-size: 1.4em;

          }

          .details {
            margin-top: 1em;
            width: 100%;

            ul {
              list-style: none;
              display: flex;
              width: 80%;
              margin: 0 auto;

              li {
                margin: auto;
                color: @fontColor;

                form {
                  display: inline-block;

                  .active {
                    color: darkred;
                    font-weight: 600;
                  }

                  label {
                    margin: 0 0.2em;
                    cursor: pointer;
                  }

                  input {
                    display: none;
                  }
                }
              }
            }
          }
        }
      }

      .article-content {
        max-width: 100%;
        padding: 0 1em;

        .article-figure {
          text-align: center;
          img {
            max-width: 100%;
          }
        }

        p {
          margin: 1em 0;
          color: @fontColor;
          line-height: 1.5;
        }

        br {
          margin: 0;
        }
      }


    }

    .article-nav-footer {
      padding-left: 2em;
      margin-bottom: 1.5rem;

      li {
        margin-top: 1em;

        a {
          text-decoration: none;
          color: @anchorColor;
          font-weight: 600;
        }
      }
    }

  }


  .corps-group {

    .section {
      .figures {
        display: flex;
        justify-content: space-around;
        flex-flow: row wrap;

        li {
          flex: 0 0 25%;
          text-align: center;

          img {
            vertical-align: bottom;
            min-width: 100%;
          }
        }
      }
    }

  }


}
